<template>
	<view class="login">
		
		<!--授权权限组件-->
		<!-- #ifdef APP-PLUS -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<!-- #endif -->
		
		<view class="userinfo">
			
			<!-- #ifdef MP-WEIXIN -->
			<view class="avatar">
				<image :src="avatarUrl ? avatarUrl : '/static/images/Group-33475.png'" mode="aspectFill" class="img"></image>
				<button class="bg" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef APP-PLUS -->
			<view class="avatar" @tap.stop="openAuth('WRITE_EXTERNAL_STORAGE')">
				<image :src="avatarUrl ? avatarUrl : '/static/images/Group-33475.png'" mode="aspectFill" class="img"></image>
				<button class="bg"></button>
			</view>
			<!-- #endif -->
			
			
			<!-- #ifdef H5 -->
			<view class="avatar">
				<image :src="avatarUrl ? avatarUrl : '/static/images/Group-33475.png'" mode="aspectFill" class="img"></image>
				<button class="bg" @click="shanghcuantu()"></button>
			</view>
			<!-- #endif -->
			
			
			<view class="item">
				<view class="label">昵称</view>
				<input v-model="nickname" type="nickname" class="weui-input" placeholder="请输入昵称" @input="oninput" @blur="onNicknameBlur" />
			</view>
			<button class="custom-style" @click="submit">提交</button>
		</view>


	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	// #endif
	
	export default {
		components: {
			// #ifdef APP-PLUS
			ykAuthpup
			// #endif
		},
		data() {
			return {
				permissionID: '',
				code: '',
				nickname: '',
				avatarUrl: ''
			}
		},
		onLoad(option) {
			//console.log('option', option);
			let that = this
			let userInfo = uni.getStorageSync('userinfo')
			that.nickname = userInfo.nickname
			that.avatarUrl = userInfo.avatar
		},
		methods: {
			//检测是否开启位置
			openAuth(permissionID) {
				this.permissionID = permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(() => {
					this.$refs['authpup'].open();
				}, 500)
			},
			//用户授权权限后的回调
			changeAuth() {
				let that = this
				//这里是权限通过后执行自己的代码逻辑
				//console.log('权限已授权，可执行自己的代码逻辑了');
				that.shanghcuantu()
			},
			
			
			onChooseAvatar(res) {
				let that = this
				console.log('选择头像',res)
				// 必须转成base64
				//this.avatarUrl = res.detail.avatarUrl //'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(res.detail.avatarUrl,'base64')
				
				uni.uploadFile({
					url: that.$store.state.baseUrl + '/api/user/uploadAvatar',
					filePath: res.detail.avatarUrl,
					name: 'file',
					header: {
						'authorization': uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						var istx = JSON.parse(uploadFileRes.data)
								
						that.avatarUrl = istx.result.show_path
								
						console.log(istx)
					}
				});
			
			},
			shanghcuantu(){
				let that = this
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function(res) {
						uni.uploadFile({
							url: that.$store.state.baseUrl + '/api/user/uploadAvatar',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'authorization': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								var istx = JSON.parse(uploadFileRes.data)
				
								that.avatarUrl = istx.result.show_path
				
								//console.log(istx)
							}
						});
				
					}
				})
			},
			submit() {
				if (!this.avatarUrl) {
					uni.showToast({
						title: '请选择用户头像',
						icon: 'none'
					});
				} else {
					//保存修改接口 editnicheng
					let that = this
					that.$api.editnicheng({
						nickname: that.nickname,
						avatar: that.avatarUrl
					}).then(res => {
						////console.log('', res)
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					})
				}
			},
			oninput(e) {
				let that = this
				let val = e.detail.value
				//console.log(e)
			},
			onNicknameBlur(e) {
				this.nickname = e.detail.value;
			},
		}
	}
</script>

<style scoped lang="scss">
	.login {
		min-height: 100vh;
		background: #FAF9F9;
		padding-top: 100rpx;

		.custom-style {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690rpx;
			height: 88rpx;
			background-image: linear-gradient(to right, #FF8C3D, #FA5D37);
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #fff;
			margin: 70rpx auto 40rpx;
		}

		.userinfo {
			.avatar {
				width: 196rpx;
				height: 196rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				margin: 0 auto 60rpx;

				.img {
					width: 196rpx;
					height: 196rpx;
					border-radius: 50%;
				}

				.bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 200rpx;
					height: 200rpx;
					opacity: 0;
				}

				.upimg {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}

			.item {
				width: 690rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				margin: auto;
				padding: 0 30rpx;

				.label {
					font-size: 28rpx;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>